<template>
	<view class="">
		<view class="theader position-r">
			<image class="bgImg" src="../../static/icon/my-bg.png" mode=""></image>
			<x-navtitle text='个人中心'></x-navtitle>
			<view class="d-flex-yCenter-sb pg-30 position-r mt-20">
				<view class="d-flex aling-centen">
					<view class="">
						<image :src="userimg || '../../static/icon/userImg.png'" class="userimg" mode=""></image>
					</view>
					<navigator v-if="!uname" url="/pages/login/login" class="loginBtn">授权登录</navigator>
					<view v-else class="d-flex flex-d jfy-sa textColor-white ml-20">
						<text class="font-32" @tap='this.$tool.codeStatus.apply(this)'>{{uname}}</text>
						<text class="mt-10" v-if="userinfo.phone">{{userinfo.phone}}</text>
					</view>
				</view>
				<view class="rightBtn" @click="commonVip">{{is_sign?'已签到':'立即签到'}}</view>
			</view>
			<view class="code d-flex-yCenter-sb pg-30 textColor-white" style="position: relative;">
				<text @click="commonVip">普通会员</text>
				<navigator class="d-flex aling-centen" url="/goodsPackage/payCode/payCode" hover-class="none">
					<text class="mr-20">付款码</text>
					<view class="">
						<image src="../../static/icon/erweima.png" mode=""></image>
					</view>
				</navigator>
			</view>
		</view>
		<!--  -->
		<view class="pg-30 d-flex-yCenter-sb cartBox">
			<navigator class="item " url="/goodsPackage/my-order/my-order" hover-class="none">
				<text>我的订单</text>
				<image src="../../static/icon/dindan.png"></image>
			</navigator>
			<view class="item" @click="cardManage">
				<text>卡券管理</text>
				<image src="../../static/icon/kajuan.png" mode=""></image>
			</view>
			<view class="item" @click="goodsPackage">
				<text>积分商城</text>
				<image src="../../static/icon/jifen.png" mode=""></image>
			</view>
		</view>
		<view class="listMin ">
			<view hover-class="hover" class="px-30 mt-20" @tap='_link("/goodsPackage/balance/balance")'>
				<view class="d-flex-yCenter-sb  border-b py-20 ">
					<view class="d-flex aling-centen ">
						<image src="../../static/icon/yue.png"></image>
						<text class="ml-30">余额</text>
					</view>
					<view class="d-flex aling-centen">
						<text class="textColor-public mr-20">{{userinfo.money}}</text>
						<u-icon name="arrow-right" color="#000" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view hover-class="hover" class="px-30" v-for="(item,index) in dataList" :key='index'>
				<navigator class="d-flex-yCenter-sb  border-b py-20 " :url="item.url" hover-class="none">
					<view class="d-flex aling-centen ">
						<image :src="item.icon"></image>
						<text class="ml-30">{{item.text}}</text>
					</view>
					<u-icon name="arrow-right" color="#000" size="28"></u-icon>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		http_member_is_sign
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				is_sign: 0, // 签到状态
				// 选项卡列表
				dataList: [{
						icon: '../../static/icon/yue.png',
						text: '优惠活动',
						url: '/goodsPackage/activities/activities'
					},
					{
						icon: '../../static/icon/wodediz.png',
						text: '我的地址',
						url: '/goodsPackage/addressList/addressList'
					},
					{
						icon: '../../static/icon/fenxiao.png',
						text: '分销中心',
						url: '../../mySubcontract/distributionCenter/distributionCenter'
					},
					{
						icon: '../../static/icon/wodexinx.png',
						text: '我的信息',
						url: '../../myMessage/myMessage/myMessage'
					},
					{
						icon: '../../static/icon/jiaruhuke.png',
						text: '加入虎克',
						url: '/goodsPackage/jiaru-hk/jiaru-hk'
					},
				]
			}
		},
		computed: {
			...mapGetters(['uname', 'userimg', 'userinfo'])
		},
		onShow() {
			if (!this.userMD.getToken()) return
			http_member_is_sign().then(res => {
				this.is_sign = res.data.is_sign
			})
		},
		onLoad() {
			console.log(this.userinfo);
		},
		methods: {
			_link(e) {
				uni.navigateTo({
					url: e
				})
			},
			// 分销中心
			distribution(index) {
				switch (index) {
					case 2:
						uni.navigateTo({
							url: '../../mySubcontract/distributionCenter/distributionCenter'
						})
						break;
						// 我的信息
					case 3:
						uni.navigateTo({
							url: '../../myMessage/myMessage/myMessage'
						})
						break;
				}

			},
			commonVip() {
				uni.navigateTo({
					url: '../../mySubcontract/MemberCenter/MemberCenter'
				})
			},
			// 积分商城
			goodsPackage() {
				uni.navigateTo({
					url: '../../myIntegrateShoop/shoppingMall/shoppingMall'
				})
			},
			// 卡劵管理
			cardManage() {
				uni.navigateTo({
					url: '../../myCardManagement/CardManagement/CardManagement'
				})
			}
		}
	}
</script>

<style lang="scss">
	.theader { 
		// background-image: -webkit-linear-gradient(75deg,#D33AA7 0% ,  #7B3BE8 25%, #107DFE 50%, #945BA4 75%, #DE3EBE 100%);
		.bgImg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}

		background-size: 100% 100%;

		.userimg {
			width: 113rpx;
			height: 113rpx;
			border-radius: 50%;
		}

		.loginBtn {
			width: 170rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			margin-left: 15rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 30rpx;
		}

		.rightBtn {
			position: absolute;
			right: 0;
			width: 170rpx;
			line-height: 50rpx;
			text-align: center;
			background: rgba(255, 255, 255, 0.5);
			color: #fff;
			border-radius: 25rpx 0px 0px 25rpx;
		}

		.code {

			// margin-top: 50rpx;
			image {
				width: 54rpx;
				height: 54rpx;
			}
		}
	}

	.cartBox {
		.item {
			width: 210rpx;
			height: 210rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			border: 2rpx solid #ddd;
			border-radius: 12rpx;
			box-shadow: 0rpx 1rpx 5rpx 0rpx rgba(0, 0, 0, 0.2) !important;
			padding: 20rpx;

			image {
				width: 36rpx;
				height: 34rpx;
			}
		}
	}

	.listMin {
		.hover {
			background: rgba(0, 0, 0, 0.05);
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
